import React from "react";
import styles from "@styles/header.module.less";

// 定义Props接口，用于类型检查组件的props
interface Props {
  title?: string; // 可选的标题属性，类型为字符串
  left: React.ReactElement; // 必须的左侧元素，类型为React元素
  right?: React.ReactElement; // 可选的右侧元素，类型为React元素
  className?: string; // 可选的className属性，用于添加自定义样式，类型为字符串
}

// 定义Header组件，接收Props类型的参数
export default function Header({ title, left, right, className }: Props) {
  return (
    // 使用模板字符串动态添加样式类名，实现样式的自定义和扩展
    <div className={`${styles.container} ${className}`}>
      {left} {/* 渲染左侧元素 */}
      <div className={styles.title}>{title}</div> {/* 渲染标题 */}
      {right} {/* 渲染右侧元素 */}
    </div>
  );
}